<template>
    <Search></Search>
    <Swipe></Swipe>
    <van-grid>
        <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <div class="box" style="margin-top: 20px;">
        <span style="font-weight: bold;">京东秒杀</span><span
            style="margin-left: 10px;background: red;color: #fff;">8点场</span><span style="width: 20px;height: 10px;border: 1px solid red;border-radius: 5px;font-weight: bold;"><span>01</span>:<span>40</span>:<span>41</span></span>
            <span style="margin-left: 15px;font-weight: bold;">发现好货</span>
    </div>
    <div class="box1">
        <div class="b1" style="float: left;margin-left: 20px;">
            <img src="../views/img/首页_03.gif" alt="" style="margin-left: 10px;">
            <p style="font-weight: bold;">￥8999</p>
        </div>
        <div class="b2" style="float: left;margin-left: 20px;">
            <img src="../views/img/首页_03.gif" alt="" style="margin-left: 10px;">
            <p style="font-weight: bold;">￥8999</p>
        </div>
        <div class="b3" style="float: left;margin-left: 20px;">
            <img src="../views/img/首页_03.gif" alt="" style="margin-left: 10px;">
            <p style="font-weight: bold;">￥8999</p>
        </div>
        <div class="b4" style="float: left;margin-left: 20px;">
            <span style="color: #aff2ce;">品质新生活</span>
            <p><img src="../views/img/首页_03.gif" alt="" style="margin-left: 10px;"><img src="../views/img/首页_03.gif"
                    alt="" style="margin-left: 10px;"></p>
        </div>
    </div>
    <div class="box2">
        <div class="bb1" style="float: left;">
            <span style="font-weight: bold;margin-top: 20px;margin-left: 10px;">品牌秒杀</span>
        <p style="margin-left: 10px;margin-top: 10px;color: orange;">品质好物秒</p>
        </div>
        <div class="bb2" style="float: left;">
            <span style="font-weight: bold;margin-top: 20px;margin-left: 10px;">品类秒杀</span>
        <p style="margin-left: 10px;margin-top: 10px;color: red;">低至1588</p>
        </div>
        <div class="bb3" style="float: left;">
            <span style="font-weight: bold;margin-top: 20px;margin-left: 10px;">新品首发</span>
        <p style="margin-left: 10px;margin-top: 10px;color: #6dc4fe;">华为智慧屏</p>
        </div>
        <div class="bb4" style="float: left;">
            <span style="font-weight: bold;margin-top: 20px;margin-left: 10px;">排行榜</span>
        <p style="margin-left: 10px;margin-top: 10px;color: #c084f2;">跟榜购好物</p>
        </div>
    </div>
</template>
<script setup>
import { catitemsApi } from '@/api/api';
import Search from '@/components/Search.vue';
import Swipe from '@/components/Swipe.vue';
import { ref } from 'vue';
let catitemsApiData = ref([])
catitemsApi().then(res => {
    catitemsApiData.value = res.data.message
})
</script>

<style lang="scss" scoped></style>